<template>
  <div :style="'width: 100%; max-width: ' + props.width + 'px;height: ' + props.height + 'px;cursor: pointer'">
    <span
      v-if="props.showText"
      :style="'width: 100%; max-width: ' + props.width + 'px;height: ' + props.height + 'px;cursor: pointer'"
      class="video-box"
    >
      <img src="@/assets/images/video.png" @click="dialogVisible=true" alt />
    </span>
    <div v-else :style="'width: 100%; max-width: ' + props.width + 'px;height: ' + props.height + 'px'">
      <span v-if="inputDisabled && (props.modelValue || '') !== ''" class="video-box">
        <video
          v-if="fileId !== ''"
          :src="baseUrl + 'image/' + fileId"
          style="width: 100%;height: 100%"
          controls
        />
      </span>
      <span v-else-if="!inputDisabled" class="video-edit-box">
        <el-upload
          :class="['cm-video', {'is-disabled': inputDisabled}]"
          action=""
          :disabled="inputDisabled"
          :http-request="handleUpload"
          :show-file-list="false"
          :accept="'video/*'"
          :before-upload="handleBeforeUpload"
        >
          <i
            v-if="loading"
            class="fa fa-regular fa-spinner fa-spin loading-icon"
            title="正在上传"
          />
          <span v-else-if="fileId !== '' && !loading" class="video-show-box">
            <i
              v-if="!props.disabled"
              class="fa fa-trash video-delete"
              title="删除"
              @click.stop="deleteVideo"
            />
            <video
              v-if="fileId !== ''"
              :src="baseUrl + 'image/' + fileId"
              style="width: 100%;height: 100%"
              controls
            />
          </span>
          <i v-else class="fa fa-plus plus-icon"></i>
        </el-upload>
      </span>
    </div>

    <el-dialog
      title="视频查看"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      fullscreen
      append-to-body
      destroy-on-close
    >
      <video
        v-if="fileId !== ''"
        :src="baseUrl + 'image/' + fileId"
        style="width: 99%;height: 99%"
        controls
      />
      <template #footer>
        <el-button
          size="large"
          type="info"
          @click="dialogVisible=false"
        >关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {nextTick, ref, watch} from 'vue'
import {ElMessage, useDisabled, useFormItem} from "element-plus";
import api from "@/http/api";

const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
  modelValue: [Number, String],
  disabled: {
    type: Boolean,
    default: false
  },
  width: {
    type: Number,
    default: 100
  },
  height: {
    type: Number,
    default: 100
  },
  showText: Boolean
});

const loading = ref(false);
const fileId = ref(props.modelValue || '');
const baseUrl = ref(import.meta.env.VITE_BASE_AFFIX_PATH);
const inputDisabled = useDisabled() || props.disabled;
const dialogVisible = ref(false);
const formItem = useFormItem();

const handleUpload = (data) => {
  return new Promise((resolve, reject) => {
    api.upload({'file': data.file}).then((res) => {
      loading.value = false;
      fileId.value = res.data.id;
      emit('update:modelValue', res.data.id);
      nextTick(() => {
        if (formItem && formItem.formItem) {
          formItem.formItem.validate('change');
        }
      });
      resolve();
    }).catch(() => {
      loading.value = false;
      reject();
    });
  });
};

const handleBeforeUpload = (file) => {
  if (loading.value) {
    ElMessage.error("视频正在上传中，请稍候再试！");
    return false;
  }
  loading.value = true;

  let isImage = file.type.includes("video");
  if (!isImage) {
    loading.value = false;
    ElMessage.error("上传文件类型必须是视频!");
  }
  let isLt200M = file.size / 1024 / 1024 < 200;
  if (!isLt200M) {
    loading.value = false;
    ElMessage.error("上传视频大小不能超过 200MB!");
  }
  return isImage && isLt200M;
};

const deleteVideo = () => {
  fileId.value = '';
  emit('update:modelValue', '');
};

watch(() => props.modelValue, (newVal) => {
  fileId.value = newVal;
});
</script>

<style scoped>
.cm-video {
  height: 100%;
  width: 100%;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  border: 1px dashed #c2c2c2;
}
.cm-video :deep(.el-upload) {
  display: flex;
  text-align: center;
  cursor: pointer;
  outline: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.cm-video :deep(.el-upload span) {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cm-video:not(.is-disabled) :deep(.el-upload) {
  cursor: pointer;
}
.cm-video:not(.is-disabled) :deep(.el-upload:hover) {
  border-color: #409EFF;
}
.loading-icon {
  font-size: 28px;
  color: #8c939d;
  position: absolute;
}
.plus-icon {
  font-size: 28px;
  color: #8c939d;
  position: absolute;
}
.cm-video img {
  max-width: 100%;
  max-height: 100%;
}
.video-box {
  border: 1px dashed #d9d9d9;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.video-box img {
  max-width: 100%;
  max-height: 100%;
}
.cm-video :deep(.el-upload:after) {
  display: block;
  margin-top: 100%;
  content: ""
}
.video-show-box {
  position: relative;
}
.video-delete {
  top: 10px;
  right: 10px;
  position: absolute;
  color: red;
  z-index: 999;
}
</style>